WWL.htmled = function ( name )
{
	var htmled = new WWL ( 'htmled', name );

	htmled.editor = HTMLEdManager.create ( name, null, [ 'edit', 'list', 'text_styles', 'image', 'table' ] );

	htmled.width = 400;
	htmled.height = 300;

	htmled._edit_mode = false;
	htmled._curr_html = "";

	htmled.to_string = function ()
	{
		var name = "cnt:htmled:" + htmled.id;
		var w = htmled.width + 40, h = htmled.height;
		var r = { w: w, h: h, id: htmled.id, name: name, htmled_name: htmled.name, txt_w: w - 64, txt_cnt_w: w - 40 };
		var t = '<div class="htmled_cnt" style="width: %(w)spx; height: %(h)spx;" id="%(name)s">' + 
			'<div style="overflow-y: auto; width: %(txt_cnt_w)spx; height: %(h)spx;">' +
			'	<div id="txt:htmled:%(id)s" style="width: %(txt_w)spx;"></div>' +
			'</div>' + 
			'<div id="btn1:htmled:%(id)s" class="btn1" onclick="WWL.htmled.edit(\'%(htmled_name)s\',\'visual\')" title="Modifica il testo">M</div>' +
			'<div id="btn2:htmled:%(id)s" class="btn2" onclick="WWL.htmled.edit(\'%(htmled_name)s\')" title="Conferma modifiche">O</div>' +
			'<div id="btn3:htmled:%(id)s" class="btn3" onclick="WWL.htmled.edit(\'%(htmled_name)s\',\'undo\')" title="Annulla le modifiche">X</div>' +
			'<div id="btn4:htmled:%(id)s" class="btn4" onclick="WWL.htmled.edit(\'%(htmled_name)s\',\'html\')" title="Modifica HTML">H</div>' +
			'</div>';

		var s = String.formatDict ( t, r );

		return s;

	};

	htmled.to_textarea = function ()
	{
		var id = "txtarea:" + htmled.id;
		var s = '<textarea id="' + id + '" class="htmled_textarea" style="width: 100%; height: 100%">' + htmled._curr_html + '</textarea>';
		return s;
	};

	htmled.get_html = function ()
	{
		var res = "";

		switch ( htmled._edit_mode )
		{
			case "visual":
				res = htmled._filter_out ( htmled.editor.get_html () );
				break;

			case "html":	
				var el = $ ( "txtarea:" + htmled.id );
				res = el.value;
				break;

			default:
				res = htmled._curr_html;
				break;
		}

		return res;
	};

	htmled.set_html = function ( html )
	{
		switch ( htmled._edit_mode )
		{
			case "visual":
				htmled.editor.set_html ( html );
				break;

			case "html":
				var el = $ ( "txtarea:" + htmled.id );
				el.value = html;
				break;

			default:
				htmled.editor.remove ();
				$( "txt:htmled:" + htmled.id, html, true );
				$( "txt:htmled:" + htmled.id ).style.display = "block";
				break;
		}

		htmled._curr_html = html;
	};

	htmled._filter_out = function ( txt )
	{
		
		// remove some tags
		txt = txt.replace ( /<.?(font|textformat)[^>]*>/gi, "" );

		// make all tags lowercase
		txt = txt.replace ( /<([^>]*)>/g, function ( v ) 
			{
				return v.toLowerCase ();
			} );

		return liwe.utils.map_entities ( txt.htmlEntities () );
	};

	return htmled;
};

WWL.htmled.edit = function ( htmled_name, mode )
{
	var htmled = WWL.get_instance ( 'htmled', htmled_name );
	var cnt = "txt:htmled:" + htmled.id;

	if ( htmled._edit_mode )
	{ 
		if ( mode != "undo" ) htmled._curr_html = htmled.get_html ();
		htmled._edit_mode = false;

		$( "btn1:htmled:" + htmled.id ).style.display = "block";
		$( "btn4:htmled:" + htmled.id ).style.display = "block";
		$( "btn2:htmled:" + htmled.id ).style.display = "none";
		$( "btn3:htmled:" + htmled.id ).style.display = "none";

		htmled.set_html ( htmled._curr_html );
	} else {
		if ( mode == "html" )
		{
			$( cnt, htmled.to_textarea () );
		} else {
			htmled.editor.replace ( cnt, htmled.width - 64, htmled.height - 40, htmled._curr_html  );
		}

		htmled._edit_mode = mode;

		$( "btn1:htmled:" + htmled.id ).style.display = "none";
		$( "btn4:htmled:" + htmled.id ).style.display = "none";
		$( "btn2:htmled:" + htmled.id ).style.display = "block";
		$( "btn3:htmled:" + htmled.id ).style.display = "block";
	}
};
